<template>
  <view class="center">
    <view class="logo" @click="goLogin" :hover-class="ifLogin ? 'logo-hover' : ''">
      <image class="logo-img" :src="!ifLogin&&user.avatarUrl!=Null ? user.avatarUrl : avatarUrl"></image>
      <view class="logo-title">
        <text class="uer-name">Hi，{{user!='' ? user.nickName : '您未登录！请点击登录'}}</text>
        <text class="go-login navigat-arrow" v-if="user==''">&#xe761;</text>
      </view>
    </view>
    <view class="center-list">
      <view class="center-list-item border-bottom" @click="goPerson()">
        <text class="list-icon">&#xe75b;</text>
        <text class="list-text">帐号管理</text>
        <text class="navigat-arrow">&#xe74c;</text>
      </view>
    </view>
    <view class="center-list">
      <view class="center-list-item" @click="goRecord()">
        <text class=" list-icon">&#xe77a;</text>
        <text class="list-text">打卡记录</text>
        <text class="navigat-arrow">&#xe74c;</text>
      </view>
    </view>

    <view class="center-list">
      <view class="center-list-item" @click="goRecord()">
        <text class=" list-icon">&#xe6eb;</text>
        <text class="list-text">进出管理</text>
        <text class="navigat-arrow">&#xe74c;</text>
      </view>
    </view>

    <view class="center-list">
      <view class="center-list-item border-bottom" @click="goCart">
        <text class="list-icon">&#xe763;</text>
        <text class="list-text">我的购物车</text>
        <text class="navigat-arrow">&#xe74c;</text>
      </view>
      <view class="center-list-item" @click="goOrder()">
        <text class="list-icon">&#xe76a;</text>
        <text url="/pages/my/order/order" class="list-text">我的订单</text>
        <text class="navigat-arrow">&#xe74c;</text>
      </view>
    </view>
    <view class="center-list">
      <view class="center-list-item border-bottom">
        <text class="list-icon">&#xe767;</text>
        <text class="list-text">反馈中心</text>
        <text class="navigat-arrow">&#xe74c;</text>
      </view>
      <view class="center-list-item" @click="goPrivacy()">
        <text class="list-icon">&#xe762;</text>
        <text class="list-text">服务条款及隐私</text>
        <text class="navigat-arrow">&#xe74c;</text>
      </view>
    </view>
    <view class="center-list">
      <view class="center-list-item">
        <text class="list-icon">&#xe764;</text>
        <text class="list-text">推荐给他人</text>
        <text class="navigat-arrow">&#xe74c;</text>
      </view>
    </view>

    <view class="center-list">
      <view class="center-list-item">
        <text class="list-icon">&#xe761;</text>
        <text class="list-text" @click="loginOut">退出账号</text>
        <text class="navigat-arrow">&#xe74c;</text>
      </view>
    </view>

  </view>
</template>

<script>
  export default {
    data() {
      return {
        ifLogin: false,
        avatarUrl: "/static/uni-center/logo.png",
        user: undefined
      }
    },
    onShow() {
      this.load()
    },
    methods: {
      load() {
        this.user = uni.getStorageSync('user')
        if (this.user != null || this.user != '') {
          this.ifLogin = true
          this.avatarUrl = this.user.avatarUrl
        } else {
          this.ifLogin = false
        }
        if (this.user == null || this.user == '') {
          this.avatarUrl = "/static/uni-center/logo.png"
        }
        // console.log("页面触发更新")
      },
      goLogin() {
        if (!this.user) {
          uni.navigateTo({
            url: '/pages/my/login/login'
          })
        }
      },
      goRecord() {
        uni.navigateTo({
          url: '/pages/my/record/record'
        })
      },
      goPerson() {
        uni.navigateTo({
          url: '/pages/my/person/person'
        })
      },
      goCart() {
        uni.navigateTo({
          url: '/pages/my/cart/cart'
        })
      },
      goOrder() {
        uni.navigateTo({
          url: '/pages/my/order/order'
        })
      },
      goPrivacy() {
        uni.navigateTo({
          url: '/pages/my/privacy/privacy'
        })
      },
      loginOut() {
        uni.removeStorage({
          key: 'user',
          success: (res => {
            uni.showToast({
              icon: "success",
              title: "退出成功"
            })
            this.load()
          })
        });
      }
    },
  }
</script>

<style lang="scss">
  @font-face {
    font-family: texticons;
    font-weight: normal;
    font-style: normal;
    src: url('https://at.alicdn.com/t/c/font_3855186_ddn7qwhwvgt.ttf') format('truetype');
  }

  // url('https://at.alicdn.com/t/font_984210_5cs13ndgqsn.ttf') format('truetype'),
  page,
  view {
    display: flex;
  }

  page {
    background-color: #f8f8f8;
  }

  .center {
    flex-direction: column;
  }

  .logo {
    width: 750upx;
    height: 240upx;
    padding: 20upx;
    box-sizing: border-box;
    background-color: #3c9cff;
    flex-direction: row;
    align-items: center;
  }

  .logo-hover {
    opacity: 0.8;
  }

  .logo-img {
    width: 150upx;
    height: 150upx;
    border-radius: 150upx;
  }

  .logo-title {
    height: 150upx;
    flex: 1;
    align-items: center;
    justify-content: space-between;
    flex-direction: row;
    margin-left: 20upx;
  }

  .uer-name {
    height: 60upx;
    line-height: 60upx;
    font-size: 38upx;
    color: #FFFFFF;
  }

  .go-login.navigat-arrow {
    font-size: 38upx;
    color: #FFFFFF;
  }

  .login-title {
    height: 150upx;
    align-items: self-start;
    justify-content: center;
    flex-direction: column;
    margin-left: 20upx;
  }

  .center-list {
    background-color: #FFFFFF;
    margin-top: 20upx;
    width: 750upx;
    flex-direction: column;
  }

  .center-list-item {
    height: 90upx;
    width: 750upx;
    box-sizing: border-box;
    flex-direction: row;
    padding: 0upx 20upx;
  }

  .border-bottom {
    border-bottom-width: 1upx;
    border-color: #c8c7cc;
    border-bottom-style: solid;
  }

  .list-icon {
    width: 40upx;
    height: 90upx;
    line-height: 90upx;
    font-size: 34upx;
    color: #3c9cff;
    text-align: center;
    font-family: texticons;
    margin-right: 20upx;
  }

  .list-text {
    height: 90upx;
    line-height: 90upx;
    font-size: 34upx;
    color: #555;
    flex: 1;
    text-align: left;
  }

  .navigat-arrow {
    height: 90upx;
    width: 40upx;
    line-height: 90upx;
    font-size: 34upx;
    color: #555;
    text-align: right;
    font-family: texticons;
  }
</style>
